<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>和平精英</title>
		<meta name="keywords" content="小鹿线,web前端,前端,web前端开发,web前端开发工程师" />
		<meta name="description" content="学习鹿线，你的职业路 - 小鹿线" />
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/swiper-bundle.min.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>

		<div class='container'>
			<header>
				<div class='navigation'>
					<a href="index.html" class="u-l">
						<img src="img/return.png" alt="小鹿线">
						<!-- <span>首页</span> -->
					</a>
					<a href="about.html" class="u-r share">
						<img src="img/share.png" alt="小鹿线">
						<!-- <span>关于我们</span> -->
					</a>
					<a href="learning.html" class="u-r Refresh">
						<img src="img/Refresh.png" alt="小鹿线">
						<!-- <span>学习路线</span> -->
					</a>
				</div>

				<div class="swiper-container">
					<div class="swiper-wrapper"></div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
				
				

				
			</header>
			
			<section>
				<div class="foot1 foo2">
					<ul>
						<li>
							<a href="index.html">
								<img src="img/1.png" alt="小鹿线">
								<!-- <span>首页</span> -->
							</a>
						</li>
						<li>
							<a href="curriculum.html">
								<img src="img/2.png" alt="小鹿线">
								<!-- <span>在线课程</span> -->
							</a>
						</li>
						<li>
							<a href="learning.html">
								<img src="img/3.png" alt="小鹿线">
								<!-- <span>学习路线</span> -->
							</a>
						</li>
						<li>
							<a href="about.html">
								<img src="img/4.png" alt="小鹿线">
								<!-- <span>关于我们</span> -->
							</a>
						</li>
					</ul>
				</div>
				
				<div class="wuqi u-clearfix">

					<ul class="wuqi_1 u-l">
						<ul class="wuqi_2" >
							<li>
								<a >
									
									<!--武器选择-->
										<select class="arms" id="arms">
											<option value="bj">武器</option>
											<option value="tj">武器</option>
											<option value="sh">武器</option>
										</select>
										
									<!-- <img src="img/4.png" alt="小鹿线"> -->
									<!-- <span>关于我们</span> -->
								</a>
							</li>
						</ul>
						<li class="active">
							<a href="index.html">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span >突击步枪</span>
							</a>
						</li>
						<li>
							<a href="curriculum.html">
								<!-- <img src="img/2.png" alt="小鹿线"> -->
								<span >射手步枪</span>
							</a>
						</li>
						<li >
							<a href="learning.html">
								<!-- <img src="img/3.png" alt="小鹿线"> -->
								<span >狙击枪</span>
							</a>
						</li>
						<li >
							<a href="index.html">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span >冲锋枪</span>
							</a>
						</li>
						<li class="active">
							<a href="index.html" class="active">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span>机枪</span>
							</a>
						</li>
						<li>
							<a href="index.html">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span>手枪</span>
							</a>
						</li>
						<li >
							<a href="index.html">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span>近战武器</span>
							</a>
						</li>
						<li >
							<a href="index.html">
								<!-- <img src="img/1.png" alt="小鹿线"> -->
								<span >其他</span>
							</a>
						</li>



					</ul>

				</div>
				
				

				

				
				
				
					<div class="Arms-container" ">
						<ul>
							
						</ul>
					</div>
					



				
				
				
			
				
	
				
			</section>
			
			<footer>
				<ul>
					<li>
						<a href="index.html">
							<img src="img/cion.png" alt="小鹿线">
							<!-- <span>首页</span> -->
						</a>
					</li>
					<li>
						<a href="about.html">
							<img src="img/download.png" alt="小鹿线">
							<!-- <span>关于我们</span> -->
						</a>
					</li>
					<li>
						<a href="learning.html">
							
							<img src="img/communication.png"  alt="小鹿线">
							<!-- <span>学习路线</span> -->
							<div class="shoppingCartNum">99+</div>
						</a>
					</li>
				</ul>
			</footer>



		</div>

		<script src='js/flexible.js'></script>
		<script src='js/swiper-bundle.min.js'></script>
		<script src='js/zepto.min.js'></script>
		<script src='js/lazyload.min.js'></script>
		<script>
			$(function() {
				//请求banner数据
				$.ajax({
					url: 'http://39.101.217.150:8075/banner/list',
					type: 'post',
					success: function(data) {
						var datas = data.data;
						$.each(datas, function(index, item) {
							$('.swiper-wrapper').append(
								`
					<div class="swiper-slide">
						<img src="img/header.png" alt='小鹿线'>
						<img src="${item.url}" alt="小鹿线">
					</div>
				`
							);
						});
						//swiper的使用
						var mySwiper = new Swiper('.swiper-container', {
							loop: true,
							pagination: {
								el: '.swiper-pagination'
							}
						})
					}
				})
				//请求开班计划数据
				$.ajax({
					url: 'http://39.101.217.150:8075/classplan/list',
					data: {
						page: 1,
						size: 3
					},
					success: function(data) {
						var records = data.data.records;
						$.each(records, function(index, item) {
							$('.plan-list').append(
								`
					<li>
						<div>
							<img src="${item.imgurl}" alt='小鹿线'>
						</div>
						<div class='time'>
							<h4>${item.name}</h4>
							<p>${item.mainName}</p>
							<p>开班时间：${item.classTime}</p>
							<p>
								<span>小鹿线</span>
								<a href="javascript:;">立即抢座</a>
							</p>
						</div>
					</li>
				`
							);
						})
					}
				})
				//请求企业项目数据
				$.ajax({
					url: 'http://39.101.217.150:8075/apps/list',
					data: {
						page: 1,
						size: 3
					},
					success: function(data) {
						var records = data.data.records;
						$.each(records, function(index, item) {
							$('.project-list').append(
								`
					<li>
						<div>
							<img data-original="${item.imgurl}" src="img/loading.jpg" alt='小鹿线'>
						</div>
						<div class='time'>
							<h4>${item.appName}</h4>
							<p>上架时间：${item.appTime}</p>
							<p>
								<span>小鹿线</span>
								<a href="${item.appurl}">立即购买</a>
							</p>
						</div>
					</li>
				`
							);
						})
						$('.project-list img').lazyload({
							container: $('section')
						});
					}
				})
				//请求数据
				$.ajax({
					url:"http://39.101.217.150:8075/teachers/list",
					data:{
						page:1,
						size:12
					},
					success:function(data){
						var records = data.data.records;
						$.each(records,function(index,item){
							$('.Arms-container ul').append(`
							<li data-title='${item.name}'>
							
							<div>
								 <div class="img">
								 <p class='text-overflow'>M4A1</p>
								 </div>
								 
							</div>
							</li>
							<li data-title='${item.name}'>
							
							<div>
								 <div class="img">
								 <p class='text-overflow'>M4A1</p>
								 </div>
								 
							</div>
							</li>
							<li data-title='${item.name}'>
							
							<div>
								 <div class="img">
								 <p class='text-overflow'>M4A1</p>
								 </div>
								 
							</div>
							</li>
							
								
								

							`);
						})
					}
				})
			})
			
			
			
			// </li>
			// 	<li data-title='${item.name}'>
			// 		<div>
			// 			<img src="img/scafl1.png" alt="小鹿线">
			// 		</div>
					
			// 		<p class='text-overflow'>M4A1</p>
			// 	</li>
			
			// 	<li data-title='${item.name}'>
			// 		<div>
			// 			<img src="img/scafl1.png" alt="小鹿线">
			// 		</div>
					
			// 		<p class='text-overflow'>M4A1</p>
			// 	</li>

		</script>
	</body>
</html>
